<template>
  <template v-for="item in routerList" :key="item">
    <div
      v-if="!(item.meta.show === false)"
      :class="{ 'menu-item': true, 'active-menu-item': route.name == item.name }"
      :style="{ '--level': level, '--size': size + 'px', 'font-weight': level == 0.6 ? 500 : 'bold' }"
    >
      <span @click="toPath(item)">{{ item.meta.title }}</span>
      <span v-if="item.meta.num">({{ manageStore[item.meta.num] }})</span>
    </div>
    <MenuItem v-if="item?.children" :routerList="item?.children" :level="level + 0.3" :size="14"></MenuItem>
  </template>
</template>

<script setup>
import useManageStore from "@/store/modules/manage";
import { useRouter, useRoute } from "vue-router";
defineProps({
  routerList: {
    type: Array,
    default: () => []
  },
  level: {
    type: Number,
    default: 0
  },
  size: {
    type: Number,
    default: 16
  }
});
const manageStore = useManageStore();
const router = useRouter();
const route = useRoute();
const toPath = item => {
  if (!item.children) {
    item.component && router.replace(item.path);
  }
};
</script>

<style lang="scss" scoped>
.menu-item {
  height: 40px;
  width: 100%;
  line-height: 40px;
  user-select: none;
  color: rgba(0, 0, 0, calc(1 - var(--level)));
  font-size: var(--size);
  padding: 0 20px;
  box-sizing: border-box;
}
.active-menu-item {
  background: #eef1f4;
  color: #3d3d3d;
}
</style>
